<template>
  <el-container>
    <el-aside width="200px" style="height: 100%;">
      <el-menu default-active="2" style=" background-color: aliceblue">
        <el-sub-menu index="1">
          <template #title > <el-icon><School /></el-icon><span>酒店</span></template>
          <el-menu-item index="1-1">国内酒店</el-menu-item>
          <el-menu-item index="1-2">海外酒店</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title > <el-icon><Promotion /></el-icon><span>机票</span></template>
          <el-menu-item index="2-1">国内/国际/中国港澳台</el-menu-item>
          <el-menu-item index="2-2">特价机票</el-menu-item>
          <el-menu-item index="2-3">航班动态</el-menu-item>
          <el-menu-item index="2-4">值机选座</el-menu-item>
          <el-menu-item index="2-5">退票改签</el-menu-item>
          <el-menu-item index="2-6">机票攻略</el-menu-item>
          <el-menu-item index="2-7">定制包机</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title > <el-icon><Ticket /></el-icon><span>火车票</span></template>
          <el-menu-item index="3-1">国内火车票</el-menu-item>
          <el-menu-item index="3-2">国际/中国港澳台</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4" >
          <template #title > <el-icon><Flag /></el-icon><span>旅游</span></template>
          <el-menu-item index="4-1"><router-link to="/tourismIndex" style="text-decoration: none">旅游首页</router-link></el-menu-item>
          <el-menu-item index="4-3"><router-link to="/teamTrip" style="text-decoration: none">跟团游</router-link></el-menu-item>
          <el-menu-item index="4-7"><router-link to="/freeTrip" style="text-decoration: none">自由行</router-link></el-menu-item>
        </el-sub-menu>
        <el-menu-item index="5"><el-icon><Guide /></el-icon>攻略景点</el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="background-color: white">
        <div style="width: 1200px;margin: 0 auto">
          <el-row :gutter="20">
            <el-col :span="6">
              <router-link to="/">
                <img src="/imgs/LOGO.png" width="200">
              </router-link>
            </el-col>
            <el-col :span="6">
              <el-input style="position: relative;top: 15px;border-radius: 20px;"
                        placeholder="请试着搜索任何旅行相关">
                <template #append>
                  <el-button type="primary" :icon="Search"/>
                </template>
              </el-input>
            </el-col>
            <el-col :span="2" style="border-radius: 20px;">
              <el-button type="primary" :icon="User" style="margin-top: 15px;/*margin-right: 200px*/">请登录</el-button>
            </el-col>
            <!--            <el-col :span="2" style="border-radius: 20px;">-->
            <!--              <el-button type="primary" :icon="Promotion" style="margin-top: 15px;/*margin-right: 200px*/">注册</el-button>-->
            <!--            </el-col>-->
            <el-col :span="2">
              <el-button
                  v-for="button in buttons"
                  :key="button.text"
                  :type="button.type"
                  text
                  bg
                  style="margin-top: 15px"
              >{{ button.text }}</el-button
              >
            </el-col>
            <el-col :span="6" >
              <el-dropdown style="top: 15px;right :100px;position: relative">
                <el-button type="primary" :icon="Tickets">
                  我的订单<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>机票+相关订单</el-dropdown-item>
                    <el-dropdown-item>酒店订单</el-dropdown-item>
                    <el-dropdown-item>旅游订单</el-dropdown-item>
                    <el-dropdown-item>火车票订单</el-dropdown-item>
                    <el-dropdown-item>全部订单</el-dropdown-item>
                    <el-dropdown-item>手机号查订单</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
            <el-row :gutter="10">
              <el-col :span="4" style="margin-top: 15px;position: relative;">
                <el-button type="primary" :icon="Service">客服</el-button>
              </el-col>
            </el-row>
          </el-row>
        </div>
      </el-header>
      <el-main><router-view/></el-main>
      <el-footer style="background-color: #f8fafd;height: 280px;padding: 50px 0">
        <div style="width: 1200px;margin: 0 auto;
color: #666;float:left">
          <el-row :gutter="20" >
            <el-col :span="6" >
              <h3>旅游资讯</h3>
              宾馆索引攻略索引<br>
              机票索引网站索引<br>
              旅游索引火车票索引<br>
              邮轮索引企业差旅索引<br>
              用车索引
            </el-col>
            <el-col :span="6">
              <h3>加盟合作</h3>
              分销联盟友情链接
              企业礼品卡采购保险代理
              代理合作酒店加盟
              目的地及景区合作更多加盟合作
            </el-col>
            <el-col :span="6">
              <h3>关于携程</h3>
              关于携程携程热点
              联系我们诚聘英才
              企业公民用户协议
              隐私政策营业执照
              安全中心携程内容中心
              知识产权Trip.com Group
            </el-col>
            <el-col :span="6">
              <p>境内:95010</p >
              <p>或 400-830-6666</p >
              <p>中国香港:+852-3008-3295</p >
              <p>中国澳门:+86-21 3406-4888</p >
              <p>中国台湾:+86-21 3406-4888</p >
              <p>其他国家和地区:+86-21 3406-4888</p >
            </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script setup>


const buttons = [
  { type: '', text: '注册' },

]

// import router from "@/router";



import {
  Search,
  User,
  Promotion,
  Service,
  Tickets,
  Iphone
} from '@element-plus/icons-vue'
</script>